<template>
  <a-modal v-model='dialog' v-if='dialog' width='100%' height='90%' :footer='null' wrapClassName='dialogClass' dialogClass='form-write-dialog flow-design-dialog' @opened='handleOpen' @cancel='handleClose'>

    <a-row :gutter='[8,0]' style='margin-bottom: 10px'>
      <a-col :span='3'>
        <!-- 模板选择 -->
        <a-select v-model='mode' showSearch @change='changeMode' defaultValue='aProviderModule' option-label-prop='label'
                  style='width: 100%;'>
          <a-select-option v-for='(opt,idx) in modeList' :key='idx' :label='opt.name' :value='opt.value'>
            {{ opt.name }}
          </a-select-option>
        </a-select>
      </a-col>
      <a-col :span='2'>
        <!-- 打印机绑定 -->
        <a-select v-model='printerName' dropdownMatchSelectWidth placeholder='请选择打印机' option-label-prop='label' style='width: 100%;'>
          <a-select-option v-for='(opt,idx) in printerList' :key='idx' :label='opt.name' :value='opt.name'>
            {{ opt.name }}<span v-if='opt.isDefault'>(默认)</span>
          </a-select-option>
        </a-select>
      </a-col>
      <a-col :span='19'>
        <a-space>
          <!-- 纸张设置 -->
          <a-button-group>
            <template v-for='(value,type) in paperTypes'>
              <a-button :type="curPaperType === type ? 'primary' : 'info'" @click='setPaper(type,value)' :key='type'>
                {{ type }}
              </a-button>
            </template>
            <a-popover v-model='paperPopVisible' title='设置纸张宽高(mm)' trigger='click'>
              <div slot='content'>
                <a-input-group compact style='margin: 10px 10px'>
                  <a-input type='number' v-model='paperWidth' style=' width: 100px; text-align: center'
                           placeholder='宽(mm)' />
                  <a-input style=' width: 30px; border-left: 0; pointer-events: none; backgroundColor: #fff'
                           placeholder='~' disabled
                  />
                  <a-input type='number' v-model='paperHeight' style='width: 100px; text-align: center; border-left: 0'
                           placeholder='高(mm)' />
                </a-input-group>
                <a-button type='primary' style='width: 100%' @click='otherPaper'>确定</a-button>
              </div>
              <a-button :type="'other'==curPaperType?'primary':''">自定义</a-button>
            </a-popover>
          </a-button-group>
          <a-button type='text' icon='zoom-out' @click='changeScale(false)'></a-button>
          <a-input-number
            :value='scaleValue'
            :min='scaleMin'
            :max='scaleMax'
            :step='0.1'
            disabled
            style='width: 70px;'
            :formatter='value => `${(value * 100).toFixed(0)}%`'
            :parser="value => value.replace('%', '')"
          />
          <a-button type='text' icon='zoom-in' @click='changeScale(true)'></a-button>
          <!-- 预览/打印 -->
          <a-button-group>
            <a-button type='primary' icon='eye' @click='preView'>
              预览
            </a-button>
            <a-button type='primary' @click='print'>
              打印
              <a-icon type='printer' />
            </a-button>
          </a-button-group>
          <!-- 保存/清空 -->
          <a-button-group>
            <a-button type='primary' icon='save' @click='save'>
              保存
            </a-button>
            <a-popconfirm
              title='是否确认清空?'
              okType='danger'
              okText='确定清空'
              @confirm='clearPaper'
            >
              <a-icon slot='icon' type='question-circle-o' style='color: red' />
              <a-button type='danger'>
                清空
                <a-icon type='close' />
              </a-button>
            </a-popconfirm>
          </a-button-group>
          <json-view :template='template' />
        </a-space>
      </a-col>
    </a-row>
    <a-row :gutter='[8,0]'>
      <a-col :span='3'>
        <a-card style='height: 100vh'>
          <a-row>
            <a-col :span='24' class='rect-printElement-types hiprintEpContainer'>
            </a-col>
          </a-row>
        </a-card>
      </a-col>
      <a-col :span='16'>
        <a-card class='card-design'>
          <div id='hiprint-printTemplate' class='hiprint-printTemplate'></div>
        </a-card>
      </a-col>
      <a-col :span='5' class='params_setting_container'>
        <a-card>
          <a-row class='hinnn-layout-sider'>
            <div id='PrintElementOptionSetting'></div>
          </a-row>
        </a-card>
      </a-col>
    </a-row>
    <!-- 预览 -->
    <FlymePrintView ref='preView' />
  </a-modal>
</template>

<script>

import FlymePrintView from "./preview"
import jsonView from "./core/json-view.vue"

import { hiprint } from "./js/index"
import providers from "./data/providers"
import printData from "./data/print-data"

let hiprintTemplate
export default {
  name: "FlymePrintDesigner",
  components: { FlymePrintView, jsonView },
  data() {
    return {
      template: null,
      dialog: false,
      // 模板选择
      mode: "aProviderModule",
      //打印机名称
      printerName: undefined,
      designerType: "1",
      designerId: null,
      //打印机列表
      printerList: [],
      modeList: [],
      // 当前纸张
      curPaper: {
        type: "other",
        width: 220,
        height: 80
      },
      // 纸张类型
      paperTypes: {
        "A3": {
          width: 420,
          height: 296.6
        },
        "A4": {
          width: 210,
          height: 296.6
        },
        "A5": {
          width: 210,
          height: 147.6
        },
        "B3": {
          width: 500,
          height: 352.6
        },
        "B4": {
          width: 250,
          height: 352.6
        },
        "B5": {
          width: 250,
          height: 175.6
        }
      },
      scaleValue: 1,
      scaleMax: 5,
      scaleMin: 0.5,
      // 自定义纸张
      paperPopVisible: false,
      paperWidth: "220",
      paperHeight: "80",
      lastjson: ""
    }
  },
  computed: {
    curPaperType() {
      let type = "other"
      let types = this.paperTypes
      for (const key in types) {
        let item = types[key]
        let { width, height } = this.curPaper
        if (item.width === width && item.height === height) {
          type = key
        }
      }
      return type
    }
  },
  mounted() {

  },
  methods: {
    openModal(record) {
      this.dialog = true
      this.$nextTick(() => {
        if (record) {
          this.designerId = record.designerId
          this.getPrintDesigner(record.designerId)
        } else {
          this.init()
          this.otherPaper()
        }
      })

    },
    handleOpen() {

    },
    handleClose() {

    },
    init(template) {
      this.modeList = providers.map((e) => {
        return { type: e.type, name: e.name, value: e.value }
      })
      this.changeMode(template)
    },
    //查询流程
    getPrintDesigner(designerId) {
      this.http.get(this, {
        url: this.api.spd.get,
        params: {
          designerId: designerId
        },
        success: (me, data) => {
          this.mode = data.designerType
          let designerContent = data.designerContent
          this.$nextTick(() => {
            console.info("################打印模板内容", designerContent)
            let template
            let designerObj
            if (designerContent) {
              designerObj = JSON.parse(designerContent)
              template = designerObj.json
              this.printerName = designerObj.printerName
              this.paperWidth = template.panels[0].width
              this.paperHeight = template.panels[0].height
            } else {
              //默认值
              template = { "json": { "panels": [{ "index": 0, "name": 1, "height": 120, "width": 220, "paperHeader": 0, "paperFooter": 340.15748031496065, "printElements": [], "paperNumberLeft": 565, "paperNumberTop": 204, "paperNumberContinue": true, "watermarkOptions": {}, "panelLayoutOptions": {} }] } }
              this.paperWidth = template.json.panels[0].width
              this.paperHeight = template.json.panels[0].height
            }
            this.init(template)
            this.otherPaper()
          })
        }
      })
    },
    getProviders(mode) {
      return providers.filter((item) => {
        return item.value == mode
      })[0]
    },
    changeMode(template) {
      let { mode } = this
      let provider = this.getProviders(mode)
      hiprint.init({
        providers: [provider.f]
      })
      $(".hiprintEpContainer").empty()
      hiprint.PrintElementTypeManager.build(".hiprintEpContainer", provider.value)
      $("#hiprint-printTemplate").empty()

      this.template = hiprintTemplate = new hiprint.PrintTemplate({
        template: template || {},
        dataMode: 1, // 1:getJson 其他：getJsonTid 默认1
        history: true, // 是否需要 撤销重做功能
        onDataChanged: (type, json) => {
          console.log(type) // 新增、移动、删除、修改(参数调整)、大小、旋转
          console.log(json) // 返回 template
          // 更新模板
          // hiprintTemplate.update(json)
          // console.log(hiprintTemplate.historyList)
        },
        settingContainer: "#PrintElementOptionSetting",
        paginationContainer: ".hiprint-printPagination"
      })
      hiprintTemplate.design("#hiprint-printTemplate")
      // 获取当前放大比例, 当zoom时传true 才会有
      this.scaleValue = hiprintTemplate.editingPanel.scale || 1
      this.$nextTick(() => {
        setTimeout(() => {
          if (window.hiwebSocket.opened) {
            this.printerList = hiprintTemplate.getPrinterList()
            console.log("打印机列表", this.printerList)
          }
        }, 2000)

      })
    },
    /**
     * 设置纸张大小
     * @param type [A3, A4, A5, B3, B4, B5, other]
     * @param value {width,height} mm
     */
    setPaper(type, value) {
      try {
        if (Object.keys(this.paperTypes).includes(type)) {
          this.curPaper = { type: type, width: value.width, height: value.height }
          hiprintTemplate.setPaper(value.width, value.height)
        } else {
          this.curPaper = { type: "other", width: value.width, height: value.height }
          hiprintTemplate.setPaper(value.width, value.height)
        }
      } catch (error) {
        this.$message.error(`操作失败: ${error}`)
      }
    },
    changeScale(big) {
      let scaleValue = this.scaleValue
      if (big) {
        scaleValue += 0.1
        if (scaleValue > this.scaleMax) scaleValue = 5
      } else {
        scaleValue -= 0.1
        if (scaleValue < this.scaleMin) scaleValue = 0.5
      }
      if (hiprintTemplate) {
        // scaleValue: 放大缩小值, false: 不保存(不传也一样), 如果传 true, 打印时也会放大
        hiprintTemplate.zoom(scaleValue, true)
        this.scaleValue = scaleValue
      }
    },
    otherPaper() {
      let value = {}
      value.width = this.paperWidth
      value.height = this.paperHeight
      this.paperPopVisible = false
      this.setPaper("other", value)
    },
    preView() {
      let { width } = this.curPaper
      this.$refs.preView.show(hiprintTemplate, printData, width)
    },
    print() {
      if (window.hiwebSocket.opened) {
        hiprintTemplate.print2(printData, { printer: this.printerName, title: "hiprint测试打印" })
        return
      }
      this.$error({
        title: "客户端未连接",
        content: (h) => (
          <div>
            连接【{hiwebSocket.host}】失败！
            <br />
            请确保目标服务器已
            <a href='http://113.56.24.212:81/base/static/file/SBL-Print_win_x64-1.0.9.exe' target='_blank'>
              下载
            </a>
            并
            <a href='hiprint://' target='_blank'>
              运行
            </a>
            打印服务！
          </div>
        )
      })
    },
    save() {
      let { mode } = this
      let provider = this.getProviders(mode)
      this.setTemplate({
        name: provider.value,
        printerName: this.printerName,
        json: hiprintTemplate.getJson()
      })
    },
    setTemplate(payload) {
      console.log(payload)
      //let templates = this.$ls.get("KEY_TEMPLATES", {})
      //templates[payload.name] = payload.json
      //this.$ls.set("KEY_TEMPLATES", templates)
      let designerContent = JSON.stringify(payload)
      this.http.post(this, {
        url: this.api.spd.update,
        data: {
          designerId: this.designerId,
          designerType: this.mode,
          designerContent: designerContent
        },
        success: (me, data) => {
          this.$message.info("保存成功")
        }
      })

    },
    clearPaper() {
      try {
        hiprintTemplate.clear()
      } catch (error) {
        this.$message.error(`操作失败: ${error}`)
      }
    }
  }
}
</script>

<style lang='less' scoped>
// build 拖拽
/deep/ .hiprint-printElement-type > li > ul > li > a {
  padding: 4px 4px;
  color: #1296db;
  line-height: 1;
  height: auto;
  text-overflow: ellipsis;
}

// 默认图片
/deep/ .hiprint-printElement-image-content {
  img {
    content: url("~@/assets/logo.png");
  }
}

// 设计容器
.card-design {
  overflow: hidden;
  overflow-x: auto;
  overflow-y: auto;
}

</style>
